<template>
  <!-- 这个是简单的一个 样例 后面有时间转实现一个vue2.6版本的前端上传 -->
  <div>
    <input type="file" :ref="'upload' + keynum" @change="uploadFiles()" multiple="multiple">

    <button @click="handelClick()">点击x元素触发上传</button>
  </div>
</template>

<script>
function fun_download(url, fileName) {
  const url2 = url.replace(/\\/g, "/")
  const xhr = new XMLHttpRequest()
  xhr.open("GET", url2, true)
  xhr.responseType = "blob"
  // xhr.setRequestHeader("Authorization", "Basicxxxxx")
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 获取文件blob数据并保存
      saveAs(xhr.response, fileName)
    }
  }
}
function saveAs(data, name) {
  const urlObject = window.URL || window.webkitURL || window
  const export_blob = new Blob([data])
  // createElementNS 方法可创建带有指定命名空间的元素节点 此方法返回一个element对象
  const save_link = document.createElementNS(
    "http://www.w3.org/1999/xhtml",
    "a"
  )
  save_link.href = urlObject.createObjectURL(export_blob)
  save_link.download = name
  save_link.click()
}
export default {
  props: ['keynum'],
  methods: {
    // x元素点击之后触发上传
    handelClick() {
      let dom = this.$refs["upload" + this.keynum]
      dom.click()
    },
    // 文件上传
    uploadFiles() {
      let file_arr = this.$refs["upload" + this.keynum].files
      let formDatas = new FormData()

      for (let i = 0; i < file_arr.length; i++) {
        const element = file_arr[i];
        formDatas.append("file", element)
      }
      axios.post("http://localhost:3001/upload_s", formDatas).then(res => {
        this.push_dom_2_quill(res.data.result)
      })
    },
    // 将返回数据处理到富文本中
    push_dom_2_quill() {
      let now_content = this.quill.root.innerHTML
      let new_dom = ""
      _arr.map(item => {
        // 双击
        new_dom += `<a href='${item.href}' dbclick='funDownload("${item.href}", "${item.innerHTML}")' download>${item.innerText}</a>`
      })
      this.quill.root.innerHTML = now_content + new_dom
    }
  }
}
</script>

<style scoped>
</style>